<template>
  <!-- 外层盒子 -->
  <el-container class="box">
    <!-- 左边栏 -->
    <el-aside :width="isCollapse ? '8.3083vw' : '16.4vw'" class="left">
      <div class="aside_title">
        <i v-if="!isCollapse" class="el-icon-s-fold" @click="toggleCollpase"></i>
        <i v-else class="el-icon-s-unfold" @click="toggleCollpase"></i>
        {{ logotitle }}
      </div>
      <meun @click="show = true"></meun>
    </el-aside>
    <!-- 右边框 -->
    <el-container class="right">
      <!-- 右边头 -->
      <el-header height="4.25vw">
        <heads></heads>
      </el-header>
      <!-- 右边内容 -->
     
      <el-main class="mains">
        <myTags :historyAry="history" @closeTagEvent="removeTagsByIndex" class="tag"></myTags>
        <transition name="el-fade-in-linear">
          <!-- <transition name="slide-fade"> -->
          <!-- <div v-show="show" class="transition-box">
        </div> -->
          <router-view v-show="show" class="transition-box"></router-view>
        </transition>
        <!-- <userlist></userlist> -->
      </el-main>
    </el-container>
  </el-container>

  <!-- <group></group> -->
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapMutations: mapuserinfomutation, mapState: mapuserinfostate } = createNamespacedHelpers("userinfo");
const { mapState, mapMutations } = createNamespacedHelpers("tags");
import meun from "@/components/head/meun.vue";
import Heads from "@/components/head/heads.vue";
import myTags from "@/components/Tags.vue"
// import userlist from "@/components/lists/userList.vue";
export default {
  components: { meun, Heads, myTags },
  data() {
    return {
      isCollapse: false,
      logotitle: "蜗牛在线实验室",
      show: true,
    };
  },
  methods: {
    ...mapMutations(["removeTabs"]),
    removeTagsByIndex(index) {
      console.log('indexaaaaa', index);
      this.removeTabs(index)
      this.$router.push(this.history[this.history.length-1].path)
    },
    toggleCollpase() {
      this.isCollapse = !this.isCollapse;
      if (this.isCollapse) {
        this.logotitle = "蜗牛";
      } else {
        this.logotitle = "蜗牛在线实验室";
      }
    },
  },
  computed: {
    ...mapuserinfostate(['loginUser']),
    ...mapState(["history"])
  },
};
</script>

<style scoped lang="scss">
// .el-aside::-webkit-scrollbar {
//   display: none;
// }
.el-fade-in-linear-enter-active {
  transition: all 2s ease;
}

// .slide-fade-enter-active {
//   transition: all 2s ease;
// }
// .slide-fade-leave-active {
//   transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
// }
// .slide-fade-enter, .slide-fade-leave-to {
//   transform: translateX(20px);
//   opacity: 0;
// }

.tag{
  text-align: left;
  
}
.box {
  width: 100vw;
  height: 100vh;
}

.el-aside {
  height: 56.25vw;
  // background-color: #2775b6;
  // border-radius: 2vw 0 0 2vw;
}

.mains {
  background-color: #edf1f7;
}

.left {
  height: 56.25vw;
  background-color: #3f6aec;
  // background-color: #2775b6;
  // border-radius: 1.5625vw 0 0 1.5625vw;
}

.aside_title {
  font-size: 1.3417vw;
  margin-top: 1.5083vw;
  margin-bottom: 1.2vw;
  color: white;
  // background-color: #2775b6;
}

.el-header {
  padding: 0;
}
</style>